<template>
<h3 style="text-align: center;">
    理财列表
</h3>
理财名称：
<input type="text" v-model="Search.B_Iname" />
利息：
<select v-model="Search.B_Tid">
 <option value="0">-全部-</option>
<option v-for="item in XIal" :value=item.B_Tid>{{item.B_Tyear}}利息为{{item.B_Tleave}}%</option>
</select>
<button @click="Show">查询</button>
<table class="table table-bordered" border="1">
    <!-- 理财ID、理财名称、年收益、利息、最低金额、理财人次、风险等级 -->
    <thead>
        <tr>
            <th>理财ID</th>
            <th>理财名称</th>
            <th>年收益</th>
            <th>利息</th>
            <th>最低金额</th>
            <th>理财人次</th>
            <th>风险等级</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in Info" :key="item.B_Iid">
            <td>{{item.B_Iid}}</td>
            <td>{{item.B_Iname}}</td>
            <td>{{item.B_IAPY}}</td>
            <td>{{item.B_Tleave}}</td>
            <td>{{item.B_Iminmoney}}</td>
            <td>{{item.B_INumber}}</td>
            <td>{{item.B_IFX}}</td>
            <td>操作</td>
        </tr>
    </tbody>
</table>
<div>
    共计{{Feny.listCount}}条记录
    每页{{Feny.pageSize}}条
    当前为{{Feny.pageIndex}}/{{Feny.pageCount}}页
    <a href="#" @click="Fenye('A')" >首页</a>
    <a href="#" @click="Fenye('B')" >上一页</a>
    <a href="#" @click="Fenye('C')" >下一页</a>
    <a href="#" @click="Fenye('D')" >尾页</a>
    <input type="text" style="width: 30px;" v-model="Search.Goyeshu" >
    <button @click="Gogo">跳转</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
const Info=ref([{
    B_Iid:0,
    B_Iname:'',
    B_IAPY:0,
    B_Tid:0,
    B_Iminmoney:0,
    B_INumber:0,
    B_IFX:'',
    B_Tleave:'',
}])
//分页
const Feny=ref({
    pageIndex:1,
    pageSize:3,
    listCount:0,
    pageCount:0,
    
})
//查询条件字段
const Search=ref({
    B_Iname:'',
    B_Tid:0,
    Goyeshu:1,
})
//下拉
const XIal=ref([{
    B_Tid:0,
    B_Tyear:0,
    B_Tleave:0,
}])
//钩子
import { onMounted } from 'vue';
onMounted(() => {
    Bindss();
    Show();
})
//绑定下拉
const Bindss=()=>{
  axios.get("https://localhost:44356/api/Finans/Bindlx")
  .then(res=>{
    XIal.value=res.data;
  })
  .catch(err=>{
    console.log(err);
  })
}
//显示
const Show=()=>{
  axios.get("https://localhost:44356/api/Finans/ShowFinaninfo",
  {
    params:{
      pageIndex:Feny.value.pageIndex,
      pageSize:Feny.value.pageSize,
      B_Iname:Search.value.B_Iname,
      B_Tid:Search.value.B_Tid,
    }
  })
  .then(res=>{
    Info.value=res.data.list;
    Feny.value.listCount=res.data.listCount;
    Feny.value.pageCount=res.data.pageCount;
  })
  .catch(err=>{
    console.log(err);
  })
}
//分页
const Fenye=(index:string)=>{
    switch(index)
    {
      case "A":
          Feny.value.pageIndex=1;
        break;
      case "B":
        if(Feny.value.pageIndex>1)
        {
          Feny.value.pageIndex--;
        }
        break;
      case "C":
        if(Feny.value.pageIndex<Feny.value.pageCount)
        {
            Feny.value.pageIndex++;
        }
        break;
        case "D":
          Feny.value.pageIndex=Feny.value.pageCount;
        break;
    }
    Show();
}
//跳转到指定页
const Gogo=()=>{
  //判断输入是否正确
    if(Search.value.Goyeshu<1||Search.value.Goyeshu>Feny.value.pageCount)
    {
        alert("请正确输入");
        Search.value.Goyeshu=1;
        return ;
    }
    else{
        Feny.value.pageIndex=Search.value.Goyeshu;
    Show();
    }
    
}
</script>